<template>
  <div class="components-input-demo-presuffix" v-if="avalid">
    <!---->
    <a-input @click="openModal" :placeholder="placeholder" v-model="showText" readOnly :disabled="disabled">
      <a-icon slot="prefix" type="cluster" :title="title"/>
      <a-icon v-if="showText" slot="suffix" type="close-circle" @click="handleEmpty" title="清空"/>
    </a-input>

    <j-popup-onl-report
      ref="jPopupOnlReport"
      :code="code"
      :multi="multi"
      :groupId="uniqGroupId"
      @ok="callBack"
    />

  </div>
</template>

<script>
import JPopupOnlReport from './modal/JPopupOnlReport'
export default {
  name: 'JPopup',
  components: {
    JPopupOnlReport
  },
  props: {
    code: {
      type: String,
      default: '',
      required: false
    },
    field: {
      type: String,
      default: '',
      required: false
    },
    orgFields: {
      type: String,
      default: '',
      required: false
    },
    destFields: {
      type: String,
      default: '',
      required: false
    },
    width: {
      type: Number,
      default: 1200,
      required: false
    },
    placeholder: {
      type: String,
      default: '请选择',
      required: false
    },
    value: {
      type: String,
      required: false
    },
    triggerChange: {
      type: Boolean,
      required: false,
      default: false
    },
    disabled: {
      type: Boolean,
      required: false,
      default: false
    },
    multi: {
      type: Boolean,
      required: false,
      default: false
    },
    /** 分组ID，用于将多个popup的请求合并到一起，不传不分组 */
    groupId: String

  },
  data() {
    return {
      showText: '',
      title: '',
      avalid: true
    }
  },
  computed: {
    uniqGroupId() {
      if (this.groupId) {
        const { groupId, code, field, orgFields, destFields } = this
        return `${groupId}_${code}_${field}_${orgFields}_${destFields}`
      }
    }
  },
  watch: {
    value: {
      immediate: true,
      handler: function(val) {
        if (!val) {
          this.showText = ''
        }else {
          this.showText = val
        }
      }
    }
  },
  created() {
  },
  mounted() {
    if (!this.orgFields || !this.destFields || !this.code) {
      this.$message.error('popup参数未正确配置!')
      this.avalid = false
    }
    if (this.destFields.split(',').length != this.orgFields.split(',').length) {
      this.$message.error('popup参数未正确配置,原始值和目标值数量不一致!')
      this.avalid = false
    }
  },
  methods: {
    openModal() {
      if (this.disabled === false) {
        this.$refs.jPopupOnlReport.show()
      }
    },
    handleEmpty() {
      this.showText = ''
      const destFieldsArr = this.destFields.split(',')
      if (this.triggerChange) {
        if (destFieldsArr.length > 0) {
          const res = {}
          for (let i = 0; i < destFieldsArr.length; i++) {
            res[destFieldsArr[i]] = ''
          }
          this.$emit('callback', res)
        }
      } else{
        this.$emit('input', '')
      }
    },
    callBack(rows) {
      const row = rows[0]
      const orgFieldsArr = this.orgFields.split(',')
      const destFieldsArr = this.destFields.split(',')
      let resetText = false
      if (this.field && this.field.length > 0) {
        this.showText = ''
          resetText = true
      }
      const res = {}
      if (orgFieldsArr.length > 0) {
        for (let i = 0; i < orgFieldsArr.length; i++) {
          if (!row[orgFieldsArr[i]] || row[orgFieldsArr[i]].length == 0 || row[orgFieldsArr[i]] == 'null') {
            if (row[orgFieldsArr[i]] == 0) {
              res[destFieldsArr[i]] = '0'
            } else{
              res[destFieldsArr[i]] = ''
            }
          }else {
            res[destFieldsArr[i]] = row[orgFieldsArr[i]] + ''
          }
        }
        if (resetText === true) {
          this.showText = row[orgFieldsArr[destFieldsArr.indexOf(this.field)]]
        }
      }
      if (this.triggerChange) {
        // v-dec时即triggerChange为true时 将整个对象给form页面 让他自己setFieldsValue
        this.$emit('callback', res)
      }else {
        // v-model时 需要传一个参数field 表示当前这个字段 从而根据这个字段的顺序找到原始值
        // this.$emit("input",row[orgFieldsArr[destFieldsArr.indexOf(this.field)]])
        this.$emit('input', this.showText, res)
      }
    }
  }
}
</script>
<style scoped>
  .components-input-demo-presuffix .anticon-close-circle {
    cursor: pointer;
    color: #ccc;
    transition: color 0.3s;
    font-size: 12px;
  }
  .components-input-demo-presuffix .anticon-close-circle:hover {
    color: #f5222d;
  }
  .components-input-demo-presuffix .anticon-close-circle:active {
    color: #666;
  }
</style>
